<template>
  <div>
    <zm-dialog title="预览" :visible.sync="value" append-to-body :before-close="dialogClose" :close-on-click-modal="false" size="large">
      <div>
        <el-button type="primary" size="mini" @click="downReceipt">下载</el-button>
      </div>
      <h1 class="tc">{{form.customerName}}签收回执单</h1>
      <zm-form :model="form" ref="form">
        <div>
          <zm-form-item class="vm">
            尊敬的{{form.customerName}}：
          </zm-form-item>
          <zm-form-item class="fr vm">
            编号：{{form.num}}
          </zm-form-item>
        </div>
        <zm-form-item class="">
          &emsp;&emsp;为了更完善的提供服务，我可现将如下卡券交付贵司，请仔细核对您所收到的卡券信息，确认无误后在签收栏中签字并回执。谢谢！
        </zm-form-item>
        <zm-form-item class="ml20">
          <el-row v-for="(item, index) in tableData" :key="index" :gutter="20">
            <el-col :span="4" class="tc" style="border: 1px solid black;">
              <div class="grid-content bg-purple">{{item.left}}</div>
            </el-col>
            <el-col :span="8" class="tc" style="border: 1px solid black;">
              <div class="grid-content bg-purple">{{item.right}}</div>
            </el-col>
          </el-row>
        </zm-form-item>
        <div>
          <p class="mb20 ml20">号码段如下：</p>
          <zm-form-item class="ml20">
            <el-row v-for="(item, index) in form.codeIdDetail" :key="index" :gutter="20">
              <el-col :span="2" class="tc" style="border: 1px solid black;">
                <div class="grid-content bg-purple">{{index + 1}}</div>
              </el-col>
              <el-col :span="6" class="tc" style="border: 1px solid black;">
                <div class="grid-content bg-purple">{{item.left}}</div>
              </el-col>
              <el-col :span="2" class="tc" style="border: 1px solid black;">
                <div class="grid-content bg-purple">至</div>
              </el-col>
              <el-col :span="6" class="tc" style="border: 1px solid black;">
                <div class="grid-content bg-purple">{{item.right}}</div>
              </el-col>
              <el-col :span="4" class="tc" style="border: 1px solid black;">
                <div class="grid-content bg-purple">共{{item.num}}张</div>
              </el-col>
            </el-row>
          </zm-form-item>
        </div>
        <zm-form-item class="mtb20 mr60 fr">
          <p class="mb30">签收人:</p>
          <p class="mr40">签收日期:</p>
        </zm-form-item>
      </zm-form>
      <div slot="footer" class="tr">
      </div>
    </zm-dialog>
  </div>
</template>

<script>
import dialogMixin from '@/mixins/dialogMixin'
import {
  receiptInfo,
  receiptDownload
} from '@/api/src/saleOrder'

export default {
  name: 'PreviewPanel',
  components: {},
  mixins: [dialogMixin],
  props: {
    obj: Object
  },
  data () {
    return {
      form: {}
    }
  },
  computed: {},
  created () {
    this.getInfo()
  },
  methods: {
    async getInfo () {
      this.form = await receiptInfo({ id: this.obj.id })
      this.tableData = [
        {
          left: '产品名称',
          right: this.form.productName
        },
        {
          left: '面值',
          right: this.form.parValue
        },
        {
          left: '张数',
          right: this.form.number
        },
        {
          left: '总价',
          right: this.form.saleTotalPrice
        }
      ]
    },
    async downReceipt () {
      // 下载
      const res = await receiptDownload({id: this.obj.id})
      this.$message.success('下载成功')
      if (!res.url) {
        this.$message.warning('没有找到下载的资料,确认是否有上传')
        return
      }
      const a = document.createElement('a')
      a.setAttribute('download', '')
      a.setAttribute('href', res.url)
      a.click()
    }
  }
}
</script>
